// 导入three.js
// 掌握gsap设置各种动画效果
import * as THREE from "three"
// 目标 使用控制器 查看3d
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"
// 掌握gsap 设置各种动画效果
// 导入动画库
import gsap from "gsap"
// 1 创建场景 
const scene = new THREE.Scene()
    // 2 创建相机 PerspectiveCamera透视相机 近端0.1 远端1000
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
    // 设置相机位置
camera.position.set(0, 0, 10)
scene.add(camera)
    //添加物体
    // 创建几何体
const cubeGeometry = new THREE.BoxGeometry(0.5, 1, 0.5, 9, 9, 9);
// 材质
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// 修改物体的位置
// cube.position.set(5,0,0)  x yz
cube.position.x = 2
cube.position.z = 1
cube.position.y = 3

// 设置物体缩放
// 场景添加几何体
console.log("几何体", cube);
// 旋转几何体
cube.rotation.set(Math.PI / 4, 0, 0)
scene.add(cube);
// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小 
renderer.setSize(window.innerWidth, window.innerHeight)
console.log(renderer);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement)
    // 使用渲染器 通过相机将场景渲染出来
renderer.render(scene, camera)
    // 添加坐标轴
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
// 创建 轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)
    // 每一帧渲染
    // Clock控制时间对象
    // 设置时钟
const clock = new THREE.Clock()
    // 设置动画
const animate1 = gsap.to(cube.position, {
    x: 5,
    delay: 1, //延迟几秒运动
    repeat: 10, //重复的次数 无限次循环-1
    // 往返运动
    yoyo: true,
    duration: 4,
    ease: "power3.inOut",
    onComplete: () => {
        console.log("动画完成");
    },
    onStart: () => {
        console.log("开始");
    }
})
window.addEventListener("dblclick", () => {
    console.log(animate1);
    // 判断是否运动状态 双击暂停或者继续
    if (animate1.isActive()) {
        animate1.pause()
    } else {
        animate1.resume()
    }

})
gsap.to(cube.rotation, { x: 10 * Math.PI, yoyo: true, duration: 4, ease: "power5.inOut", repeat: 10, })
    // gsap.gra repeat重复

function render() {

    renderer.render(scene, camera);
    requestAnimationFrame(render)

}


render()